<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-03-29 09:01:44
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-11-15 00:18:36
-->
<template>
  <div class="base-app-header">
    <div class="log-box" @click="goHome">
          <el-image style="width: 6em; height: 6em" :src="Logo" fit="scale-down" />
          <div class="log-box-des">qiankun微前端</div>
    </div>
    <div class="menu-box">
      <el-menu :default-active="activeIndex" router mode="horizontal" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
      <el-menu-item v-for="menu in menus" :index="menu.path">
        <div class="menu-item">
          <div class="menu-item-icon">
            <el-icon>
              <component color="#fff" :is="menu.icon"></component>
            </el-icon>
          </div>
        <div class="menu-item-text">
          {{ menu.name }}
        </div>
      </div>
      </el-menu-item>
    </el-menu>
    </div>
    <div class="user-box">
      <div class="user-box-content" @click="quit">
        <el-text class="user-box-info" :truncated="true">
          {{ users.userInfo.username }}
        </el-text>
        <el-icon size="2em">
          <SwitchButton color="#fff" />
        </el-icon>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted, onUpdated } from 'vue';
import Logo from '@/assets/image/logo.png';
import { useRouter } from 'vue-router';
import userStore from '@/stores/user';
import { clearUserOfLocalStorage } from '@package/shared/utils';
const menus = reactive([
  { path: '/microApp/vue2-app', name: 'vue2-app', icon: 'Setting' },
  { path: '/microApp/vue3-vite-app', name: 'vue3-vite-app',icon: 'Setting' },
  { path: '/microApp/admin/uicom/form', name: '表单',icon: 'Setting' },
  { path: '/microApp/admin/uicom/table', name: '表格',icon: 'Setting' }
])
const activeIndex = ref('');
const handleSelect = (key: string) => {
  activeIndex.value = key;
}
// 监听路由变化
const router = useRouter()
const activeRouter = () => {
  const path = router.currentRoute.value.path;
  const current = menus.filter(item => path.indexOf(item.path) !== -1)
  activeIndex.value = current[0]?.path;
}
// 获取登录用户数据
const users = userStore();
onMounted(() => {
  activeRouter()
})
onUpdated(() => {
  activeRouter()
})
const goHome = () => {
  router.push({
    path: '/'
  })
}
// 退出登录
const quit = () => {
  ElMessageBox.confirm(
    '是否退出当前登录?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      clearUserOfLocalStorage();
      users.clearUser();
      ElMessage({
        type: 'success',
        message: '退出成功！',
      })
      router.push({
        path: '/login'
      })
    }).catch(() => { })
}
</script>
<style lang="scss" scoped>
    .menu-item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100%;
      overflow: hidden;

      &-icon {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        height: 3em;
      }

      &-text {
        flex: 1;
        width: 100%;
        justify-content: center;
      }
    }
.base-app-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 6em;
  background-color: #545c64;
  padding: 0 10px;
  .log-box {
      display: flex;
      width: 20em;
      box-sizing: border-box;
      border-bottom: 0.2em solid transparent;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
    }
    .log-box-des {
        flex: 1;
        text-align: center;
        color: #fff;
        font-size: 1.6em;
      }
  .menu-box {
    flex: 1;
    border: 0;
    overflow: hidden;
    ul{
      border: 0!important;
    }
    a {
      text-decoration: none !important;
    }
    .is-active{
      svg{
        color: var(--base-app-menu-active-color);
      }
    }
    .set-box {
      cursor: pointer;
      padding: 2em;
      display: flex;
      align-items: center;

      &:hover {
        .el-icon svg {
          color: var(--el-menu-active-color) !important;
        }
      }
    }
  }

  .user-box {
    padding: 0 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &-popover {
      text-align: center;
    }

    &-content {
      display: flex;
      width: 10em;
    }

    &-info {
      flex: 1;
      color: #fff;
      text-align: center;
    }
  }
}
</style>
  